<template>
  <div class="cardgp3Container">
    <div class="cardgp3Card" v-for="(option, index) in options" :key="index">
      <card_f
        :image-url="option.image"
        :title="option.title"
        :str="option.sub"
      ></card_f>
    </div>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import card_f from "@/components/cards/card_f.vue";

const msg = i18nt.value.constantsTwo;

const options = [
  {
    image: new URL("@/assets/png/smg1/gp5.png", import.meta.url).href,
    title: msg.str3,
    sub: msg.str4,
  },
  {
    image: new URL("@/assets/png/smg1/gp6.png", import.meta.url).href,
    title: msg.str3,
    sub: msg.str4,
  },
  {
    image: new URL("@/assets/png/smg1/gp5.png", import.meta.url).href,
    title: msg.str3,
    sub: msg.str4,
  },
  {
    image: new URL("@/assets/png/smg1/gp6.png", import.meta.url).href,
    title: msg.str3,
    sub: msg.str4,
  },
];
</script>

<style scoped lang="scss">
.cardgp3Container {
  @include rel_cen_hw(307px, 100%);
  flex-direction: row;
  justify-content: space-between;
  .cardgp3Card {
    @include rel_cen_hw(307px, 359px);
  }
}
</style>
